<template>
  <div class="text-row-tight" :class="{ 'text-row-tight-ellipsis': ellipsis }">
    <div class="text-row-label" :style="{ paddingRight: paddingRight }">
      {{ label + getSemi() }}
    </div>
    <div class="text-row-text" :title="ellipsis ? text : ''" :style="ellipsisStyle">
      <slot>{{ text || defaultText }}</slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'text-row-tight',
  props: {
    gutter: { type: [Number, String], default: 0 },
    semi: { type: [String, Boolean], default: true },
    label: { type: String, default: '' },
    text: { type: [String, Number], default: '' },
    /* ellipsis: true 开启溢出隐藏, 可以传宽度字符串 */
    ellipsis: { type: [String, Boolean], default: false },
    defaultText: { type: String, default: '暂无' },
  },
  computed: {
    ellipsisStyle() {
      const len = this.label.length + 1;
      if (typeof this.ellipsis === 'boolean') {
        return !this.ellipsis ? {} : { width: `calc(100% - ${len}em)` };
      }
      if (typeof this.ellipsis === 'string') {
        return { width: this.ellipsis };
      }
      return {};
    },
    paddingRight() {
      if (typeof this.gutter === 'number') {
        return this.gutter + 'px';
      }
      return this.gutter;
    },
  },
  methods: {
    getSemi() {
      if (typeof this.semi !== 'boolean') {
        return this.semi;
      }
      return this.semi ? '：' : '';
    },
  },
};
</script>

<style scoped lang="less">
.text-row-tight {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  line-height: 28px;
  font-family: Microsoft YaHei, 'Avenir', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  .text-row-label {
    flex: none;
    opacity: 0.6;
  }
  .text-row-text {
    flex: auto;
    width: 0;
    min-width: 0;
    white-space: break-spaces;
    word-wrap: break-word;
    word-break: break-all;
  }
  &.text-row-tight-ellipsis {
    .text-row-text {
      flex: auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
